<template>
	<div
		ref="containerTaregt"
		class="scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent h-full overflow-auto bg-white dark:bg-zinc-800 duration-500"
	>
		<navigation-vue></navigation-vue>

		<div class="max-w-screen-xl mx-auto relative m-1 xl:mt-4">
			<list-vue></list-vue>
		</div>

		<!-- 移动端下的navbar -->
		<m-trigger-menu
			v-if="isMobileTerminal"
			class="fixed bottom-6 m-auto left-0 right-0 w-[220px]"
		>
			<m-trigger-menu-item icon="home" to="/">首页</m-trigger-menu-item>
			<m-trigger-menu-item
				v-if="$store.getters.token"
				textClass="text-zinc-400 dark:text-zinc-500"
				icon="vip"
				@click="onVipClick"
				>VIP</m-trigger-menu-item
			>
			<m-trigger-menu-item icon="profile" @click="onMyClick">{{
				$store.getters.token ? '我的' : '去登录'
			}}</m-trigger-menu-item>
		</m-trigger-menu>
	</div>
</template>

<script>
export default {
	name: 'home',
}
</script>

<script setup>
import { onActivated, ref } from 'vue'
import navigationVue from './components/navigation/index.vue'
import listVue from './components/list/index.vue'
import { isMobileTerminal } from '@/utils/flexible.js'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { useScroll } from '@vueuse/core'

const store = useStore()
const router = useRouter()

const onVipClick = () => {
	store.commit('app/changeRouteType', 'push')
	router.push('/member')
}
const onMyClick = () => {
	if (store.getters.token) {
		store.commit('app/changeRouteType', 'push')
		router.push('/profile')
	} else {
		store.commit('app/changeRouteType', 'push')
		router.push('/login')
	}
}

// 记录页面滚动位置
const containerTaregt = ref(null)
const { y } = useScroll(containerTaregt)

onActivated(() => {
	if (!containerTaregt.value) return
	containerTaregt.value.scrollTop = y.value
})
</script>

<style scoped lang="scss"></style>
